<template>
  <div class="nav">
    <div>
      <!-- 可以使被包含的组件保留状态，或避免重新渲染。 -->
      <keep-alive
        :include="['Home', 'Video', 'My', 'Village', 'Account', 'Songer']"
      >
        <router-view></router-view>
      </keep-alive>
    </div>

    <van-tabbar
      v-model="active"
      active-color="#fe3b2f"
      inactive-color="#939393"
      route
    >
      <van-tabbar-item
        v-for="(item, index) in navData"
        :key="index"
        :to="{ name: item.routerName }"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.inactiveimg : item.activeimg" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Nav",

  data() {
    return {
      active: 0,

      //导航栏数据
      navData: [
        {
          title: "发现",
          routerName: "Home",
          activeimg: require("../assets/nav/home.svg"),
          inactiveimg: require("../assets/nav/home_.svg"),
        },
        {
          title: "MV",
          routerName: "Video",
          activeimg: require("../assets/nav/video.svg"),
          inactiveimg: require("../assets/nav/video_.svg"),
        },
        {
          title: "我的",
          routerName: "My",
          activeimg: require("../assets/nav/my.svg"),
          inactiveimg: require("../assets/nav/my_.svg"),
        },
        {
          title: "关注",
          routerName: "Follow",
          activeimg: require("../assets/nav/follow.svg"),
          inactiveimg: require("../assets/nav/follow_.svg"),
        }
      ],
    };
  },
};
</script>

<style lang="less" scoped>
</style>